---
title: ViteまたはRollupプラグインをインストールする
description: プロジェクトにRollupプラグインを追加することでYAMLデータをインポートする方法を学びます。
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

AstroはViteの上に構築されViteとRollupの両方のプラグインをサポートしています。このレシピではRollupプラグインを使用して、AstroにYAML（`.yml`）ファイルをインポートする機能を追加します。

## レシピ

1. `rollup/plugin-yaml`をインストールします。

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. プラグインを`astro.config.mjs`にインポートし、Viteのplugins配列に追加します。

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```


3. 最後に、`import`文を使いYAMLデータをインポートします。

    ```js
    import yml from './data.yml';
    ```

    :::note
    AstroプロジェクトでYAMLデータをインポートできるようになりましたが、エディタはインポートしたデータの型を提供しません。型を追加するには、プロジェクトの`src`ディレクトリに`*.d.ts`ファイルを作成するか、既存のファイルを見つけて、以下を追加します。
    ```ts title="src/files.d.ts"
    // インポートするファイルの拡張子を指定します。
    declare module "*.yml" {
      const value: any; // 必要であれば、ここに型の定義を追加します。
      export default value;
    }
    ```
    これでエディターがYAMLデータの型ヒントを提供できるようになります。
    :::
